Hago el proyecto Next JS y soy nuevo en la codificación en este programa y tengo una carpeta de "Servicio". En esta carpeta hay index.js y [id].js (página de detalles). Todos los datos provienen de Next API. Index.js funciona, no hay problema. Pero cuando hago clic en el elemento de detalles, se ve el error. no se cual es mi error

Error: Error serializing `.data` returned from `getServerSideProps` in "/services/[id]". Reason: `object` ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types.

índice.js

 <section className="services-main"> <div className="services-main-context container"> <MainPageServices posts={posts} /> </div> </section> .... export async function getStaticProps() { const res = await fetch("http://localhost:3000/api/servicesApi/"); const posts = await res.json(); return { props: { posts, }, }; }

Componente MainPageServices

 <div className="main-page-services-cards"> {posts.map((card, key) => ( <div key={card.id} className="service-card"> <Link href={`/services/${card.id}`}> <a> <div className="card-img"> <Image src={card.img} alt="Services" /> </div> </a> </Link> </div> ))} </div>

Componente que no funciona (Detalles)

 const ServiceDetails = ({ data }) => { console.log(data); return ( <h1>{data.header}</h1>) ); }; export const getServerSideProps = async (context) => { const res = await fetch(`http://localhost:3000/api/servicesApi/${context.params.id}`); const data = res.json(); return { props: { data, }, }; };

API de mi página de detalles

 import { servicesData } from "../../../data"; export default function handler(req, res) { const { id } = req.query; const service = servicesData.find((service) => service.id === parseInt(id)); res.status(200).json(service); }